<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>栏目管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/bootstrap/js/jquery-2.1.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>栏目管理</h1>
        <div class="row">
            <div class="col-md-12">
                <!-- 搜索表单 -->
                <form action="${pageContext.request.contextPath}/column/list" method="get" class="form-inline" style="margin-bottom: 20px;">
                    <div class="form-group">
                        <label for="column_name">栏目名称：</label>
                        <input type="text" class="form-control" id="column_name" name="column_name" value="${param.column_name}" placeholder="请输入栏目名称">
                    </div>
                    <div class="form-group">
                        <label for="column_status">状态：</label>
                        <select class="form-control" id="column_status" name="column_status">
                            <option value="">全部</option>
                            <option value="1" <c:if test="${param.column_status == '1'}">selected</c:if>>启用</option>
                            <option value="0" <c:if test="${param.column_status == '0'}">selected</c:if>>禁用</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">搜索</button>
                    <button type="button" class="btn btn-default" onclick="clearSearch()">清空</button>
                </form>

                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>栏目ID</th>
                            <th>栏目名称</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach items="${pageInfo.list}" var="column">
                            <tr>
                                <td>${column.column_id}</td>
                                <td>${column.column_name}</td>
                                <td>${column.column_status}</td>
                                <td><fmt:formatDate value="${column.create_time}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                <td>
                                    <a href="${pageContext.request.contextPath}/column/huixian?column_id=${column.column_id}" class="btn btn-primary btn-sm">编辑</a>
                                    <a href="${pageContext.request.contextPath}/column/delete?column_id=${column.column_id}" class="btn btn-danger btn-sm">删除</a>
                                </td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
                <a href="${pageContext.request.contextPath}/column/add" class="btn btn-success">添加新栏目</a>

                <!-- 分页导航 -->
                <div class="text-center">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                                <a href="${pageContext.request.contextPath}/column/list?currentPage=1&pageSize=${pageInfo.pageSize}&column_name=${param.column_name}&column_status=${param.column_status}" aria-label="First">
                                    <span aria-hidden="true">首页</span>
                                </a>
                            </li>
                            <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                                <a href="${pageContext.request.contextPath}/column/list?currentPage=${pageInfo.pageNum - 1}&pageSize=${pageInfo.pageSize}&column_name=${param.column_name}&column_status=${param.column_status}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <c:forEach begin="1" end="${pageInfo.pages}" var="i">
                                <li class="${i == pageInfo.pageNum ? 'active' : ''}">
                                    <a href="${pageContext.request.contextPath}/column/list?currentPage=${i}&pageSize=${pageInfo.pageSize}&column_name=${param.column_name}&column_status=${param.column_status}">${i}</a>
                                </li>
                            </c:forEach>
                            <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                                <a href="${pageContext.request.contextPath}/column/list?currentPage=${pageInfo.pageNum + 1}&pageSize=${pageInfo.pageSize}&column_name=${param.column_name}&column_status=${param.column_status}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                                <a href="${pageContext.request.contextPath}/column/list?currentPage=${pageInfo.pages}&pageSize=${pageInfo.pageSize}&column_name=${param.column_name}&column_status=${param.column_status}" aria-label="Last">
                                    <span aria-hidden="true">尾页</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <div class="text-muted">
                        当前第${pageInfo.pageNum}页/共${pageInfo.pages}页，共${pageInfo.total}条数据
                        每页显示
                        <select name="pageSize" onchange="changePageSize(this.value)">
                            <option value="5" <c:if test="${pageInfo.pageSize == 5}">selected</c:if>>5</option>
                            <option value="10" <c:if test="${pageInfo.pageSize == 10}">selected</c:if>>10</option>
                            <option value="15" <c:if test="${pageInfo.pageSize == 15}">selected</c:if>>15</option>
                            <option value="20" <c:if test="${pageInfo.pageSize == 20}">selected</c:if>>20</option>
                        </select>条数据
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 清空搜索条件
        function clearSearch() {
            window.location.href = "${pageContext.request.contextPath}/column/list";
        }

        // 改变每页显示条数
        function changePageSize(pageSize) {
            var currentPage = ${pageInfo.pageNum};
            window.location.href = "${pageContext.request.contextPath}/column/list?currentPage=" + currentPage + "&pageSize=" + pageSize + "&column_name=${param.column_name}&column_status=${param.column_status}";
        }
    </script>
</body>
</html>